<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button class="btn">按钮</button>
    <script>
        document.getElementsByClassName("btn")[0].addEventListener("click", (e) => {
            console.log(e);
        })
    </script>

    <div id="app"></div>

    <script src="./react/react.development.js"></script>
    <script src="./react/react-dom.development.js"></script>
    <script src="./react/babel.min.js"></script>

    <script type="text/babel">
        class App extends React.Component {
            constructor(props) {
                super(props);

                this.state = {
                    movies: ["大话西游", "海王", "流浪地球", "盗梦空间"]
                }

                this.btnClick = this.btnClick.bind(this);
            }

            render() {
                return (
                    <div>
                        <button onClick={this.btnClick}>按钮</button>

                        <ul>
                            {
                                this.state.movies.map((item, index, arr) => {
                                    {/* 绑定事件通过箭头函数 传递事件参数e  */}
                                    return (
                                        < li className="item"
                                            onClick={e => { this.liClick(item, index, e) }}
                                            title="li"
                                            key={index}>
                                            {item}
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </div >
                )
            }

            btnClick(event) {
                console.log("按钮发生了点击", event);
            }

            liClick(item, index, event) {
                console.log("li发生了点击", item, index, event);
            }
        }

        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

</body>

</html>